<template>
	<view class="toast-custom" v-if="show" @click="close">
		<view class="toast-content">
			{{title}}
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				title: '',
				show: false,
				timer: null
			}
		},
		methods: {
			open({
				title,
				time,
				
			} = {},fn) {
				this.title = title
				this.show = true
				if (this.timer) {
					clearTimeout(this.timer)
					this.timer = null
				}
				this.timer = setTimeout(() => {
					this.close()
					fn&&fn()
				}, 2000)
			},
			close() {
				this.title = ''
				this.show = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.toast-custom {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;

		.toast-content {
			max-width: 528rpx;
			padding: 28rpx 40rpx;
			box-sizing: border-box;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 48rpx;
		}

	}
</style>